<template>
    <div class="school">
        <Semicircle :char3="team.riwulv" :char4="team.testlv" :num2="Number(team.testuser)" :num1="Number(team.usercount)"
            :style="{ marginBottom: '24px', '--height': '214px' }">
            <el-row class="title">
                <el-col :span="8" class=" text-center">全AC提交次数: <MynumberVue :num="Number(team.account)">
                    </MynumberVue> </el-col>
                <el-col :span="8" class=" text-center">AC测试点数: <MynumberVue :num="Number(team.actestcase)">
                    </MynumberVue></el-col>
                <el-col :span="8" class=" text-center">测试点得分率: <MynumberVue :num="Number(team.testcaselv)">
                    </MynumberVue>%</el-col>
            </el-row>
        </Semicircle>

        <div v-if="!team.testcase" class="testcase">
            该学校暂无练习数据
        </div>
        <div v-else>
            <el-row>
                <el-col :span="24">
                    <Mytitle title="学习人次"></Mytitle>
                    <Userchar :data="char1"></Userchar>
                </el-col>
            </el-row>
            <el-row class=" myrow">
                <el-col :span="8">

                    <div class=" char-1 char">
                        <header>测试点评测概况</header>
                        <chartVue :color="color" :data="data2" :height="150">
                        </chartVue>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="char-1 char-2 char">
                        <header>全AC题目标签</header>
                        <chartVue :color="color" :data="team.label2" :height="150">
                        </chartVue>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="char-1 char-4 char">
                        <header>全评测题目标签</header>
                        <chartVue :color="color" :data="team.label1" :height="150">
                        </chartVue>
                    </div>
                </el-col>
            </el-row>
            <el-row :style="{ marginTop: '24px' }">
                <el-col :span="12">
                    <div class=" char char-5" title="该数据统计团队创建后，所有团队成员的观看视频数，【不包括】团队创建前的视频观看">
                        <header>团队观看视频数</header>
                        <chart2Vue :data="_data2.map(e => assign({ name: e.day, count: e.count }))" :height="150">
                        </chart2Vue>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class=" char char-5 char-3" title="该数据统计团队所有成员的历史提交测评数，【包括】团队创建前的评测提交">
                        <header>成员提交评测数</header>
                        <chart2Vue :data="_data1.map(e => assign({ name: e.day, count: e.count }))" :height="150">
                        </chart2Vue>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { IDate } from '../interface';
import { Iteamdata } from './type';
import Semicircle from './Semicircle.vue'
import Mytitle from './mytitle.vue'
import Userchar from './datachar/userchar.vue'
import MynumberVue from "../components/animejs/mynumber.vue"
import chartVue from './datachar/chart.vue'
import chart2Vue from './datachar/chart2.vue'
import { assign, forEach } from 'lodash-es';
import dayjs from 'dayjs';
const color = ['#B83914', '#CF4017', '#EC4313', '#EB6C47', '#EE8263', '#FF8461', '#FF9C80', '#FFB099', '#FFC3B2', '#FFD7CC', '#FFEBE5']

const p = defineProps<{ team: Iteamdata, char1: IDate[] }>()



const data = [
    dayjs().get('months'),
    dayjs().add(1, 'month',).get('months'),
    dayjs().add(2, 'month').get('months'),
    dayjs().add(3, 'month').get('months'),
    dayjs().add(-2, 'month').get('months'),
    dayjs().add(-1, 'month').get('months')
].map(e => e + 1).map(e => {
    if (String(e).length === 1) {
        return String(0).concat(String(e))
    }
    return String(e)
})

const _data1 = computed<IDate[]>(() => {
    const type: string[] = []
    const d = data
    forEach(p.char1.filter(e => e.type === '测评次数'), e => {
        if (e.type && !type.includes(e.type)) {
            type.push(e.type)
        }
    })
    if (!type.length) {
        return d.map(e => {
            return {
                type: '',
                count: 0,
                day: e + '月'
            }
        })
    } else {
        const obj: IDate[] = []
        forEach(type, e => {
            d.forEach(d => {
                const t = p.char1.filter(e => e.type === '测评次数').find(z => z.type === e && d === z.day)
                obj.push({ type: e, day: d + '月', count: t?.count || 0 })
            })
        })
        return obj
    }
})

const _data2 = computed<IDate[]>(() => {
    const type: string[] = []
    const d = data
    forEach(p.char1.filter(e => e.type === '观看视频数'), e => {
        if (e.type && !type.includes(e.type)) {
            type.push(e.type)
        }
    })
    if (!type.length) {
        return d.map(e => {
            return {
                type: '',
                count: 0,
                day: e + '月'
            }
        })
    } else {
        const obj: IDate[] = []
        forEach(type, e => {
            d.forEach(d => {
                const t = p.char1.filter(e => e.type === '观看视频数').find(z => z.type === e && d === z.day)
                obj.push({ type: e, day: d + '月', count: t?.count || 0 })
            })
        })
        return obj
    }
})


const data2 = computed(() => {
    return [
        {
            name: 'AC测试点',
            count: p.team.actestcase
        },
        {
            name: '非AC测试点',
            count: p.team.testcase - p.team.actestcase
        },
    ]
})
</script>

<style scoped >
.title {
    font-family: 'Microsoft YaHei';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    padding-top: 12px;
    padding-bottom: 12px;
    height: 48px;
    width: 100%;
    flex: 0 0 auto;
}

.myrow {
    margin-top: 24px;
    margin-bottom: 24px;
}

.char-1 {
    width: 197px;

}

.char-2 {
    margin: 0 auto;
}

.char-3 {
    margin-left: 6px;
}

.char-4 {
    margin-left: 6px;
}

.char-5 {
    width: 302px;
}

.char {
    height: 200px;
    padding-top: 12px;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    font-family: FZZongYi-M05S
}

.school {
    padding: 12px;
}

.testcase {
    /* height: 400px; */
    color: #fff;
    font-family: FZZongYi-M05S;
    text-align: center;
}
</style>

<style>
.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}
</style>